<template>
    <div class="box">
        <p class="p">{{ title }}</p>
        <ul class="ul1">
            <li v-for="item in InfoArr" :key="item.id">
                <div class="left">
                    <p>{{ item.site }}</p>
                    <p>
                        {{ item.phone }}<span>{{ letter }}</span>
                    </p>
                </div>
                <div class="right">
                    <el-button type="primary" class="button" @click="$emit('goHuiShouDingDanGuanLi')">{{ text
}}</el-button>
                    <p v-show="text === '订单处理' ? true : false">
                        <van-count-down :time="timeDao" />
                    </p>
                </div>
            </li>
        </ul>
    </div>
</template>
  
<script setup>
import { ref } from "vue";
import { getreorders } from '../../api/index'
const InfoArr = ref([])
const letter = ref('TC_ZY')
const text = ref('订单处理')
const timeDao = ref(2 * 25 * 16 * 1000)
getreorders()
    .then((res) => {
        InfoArr.value = res.data.data.data
        // console.log(res, '----')

    })
    .catch((err) => {
        console.log(err)
    })

defineEmits(["goHuiShouDingDanGuanLi"]);
defineProps({
    title: {
        type: String,
        default: "未处理订单",
    },
    color: {
        default: "#5e72e4",
    },
})
</script>
  
<style lang="less" scoped>
.box {
    display: flex;
    flex-direction: column;
    width: 340px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 5px 5px 5px #ccc;
}

.box .p {
    height: 20px;
    padding: 20px 20px 0px 24px;
}

.box .ul1 {
    flex: 1;
    overflow-y: scroll;
}

::-webkit-scrollbar {
    display: none;
}

.button {
    width: 60px;
    font-size: 10px;
    margin-left: 10px;

}

.box .ul1 li {
    display: flex;
    margin: 40px 20px;
    justify-content: space-between;
    border-left: 4px solid red;
    font-size: 14px;

    .left {
        line-height: 30px;
        padding-left: 10px;
    }
}

.box .ul1 li:not(:nth-child(1)) {
    display: flex;
    margin: 40px 20px;
    justify-content: space-between;
    border-left: 4px solid #5e72e4;
    font-size: 14px;

    .left {
        line-height: 30px;
        padding-left: 10px;
    }
}

.left p:nth-child(2) {
    color: #ccc;
    font-size: 12px;
}

.left p:nth-child(2) span {
    font-size: 12px;
    margin-left: 10px;
}

.right p {
    color: red;
    margin-top: 2px;
    font-size: 12px;
    margin-left: 15px;

}
</style>
  